<template>
  <div>
    <Bread />
    <div class="detail-container">
      <div class="flex  item">
        <div class="left">
          <el-image :src="detailInfo.picture" fit="contain">
            <!-- <div slot="error" style="width: 100%; height: 100%;"><el-image :src="require('@/assets/img/pic_error.png')" style="width: 100%; height: 100%;"></el-image></div> -->
          </el-image>
        </div>
        <div class="right">
          <div class="head">
            <div class="title">{{ detailInfo.title }}</div>
          </div>
          <div class="right-content">
            <div class="main">
              <span class="label">院所属性：</span>
              <span class="label-v">{{
                calcAttributes(detailInfo.attributesId)
              }}</span>
            </div>
            <div class="main">
              <span class="label">研究领域：</span>
              <span class="label-v">{{
                calcStudyField(detailInfo.studyFieldId)
              }}</span>
            </div>
            <div class="main">
              <span style="letter-spacing: 0.5em;">所在</span>
              <span class="label">地：</span>
              <span class="label-v">{{ detailInfo.location }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="main-content">
        <div class="content">
          <div class="content-head">高校简介</div>
          <div v-html="detailInfo.content" class="content"></div>
        </div>

        <div class="aside">
          <h5 class="head">
            相关推荐
            <div class="head-line"></div>
          </h5>
          <ul class="pl-4">
            <li
              v-for="item in recommendList"
              :key="item.id"
              :class="['recommend-item pr-4']"
              @click="toDetail(item.id)"
            >
              <div class="flex items-center">
                <div class="avatar-container">
                  <el-image :src="item.picture" fit="contain"></el-image>
                </div>
                <div class="flex-grow">
                  <div class="title">{{ item.title }}</div>
                  <p class="sub-title">{{ item.specialty }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bread from '@/components/Bread'
import { getAcademyLibrary, requestTacademyReList } from '@/api/schools.js'

export default {
  name: 'schoolsDetail',
  components: {
    Bread,
  },
  // 当进入路由时触发
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.detailInfo.id = to.params.id
    })
  },
  // 当路由发生更新时触发
  beforeRouteUpdate(to, from, next) {
    next()
    this.detailInfo.id = to.params.id
  },
  created() {
    this.getRecommendList()
  },
  data() {
    return {
      // 院所属性
      schoolPropertyList: [],
      // 研究领域
      positionList: [],

      detailInfo: {
        id: 0,
        picture: '',
        title: '',
        attributesId: '',
        studyFieldId: '',
        location: '',
        content: ``,
      },
      recommendList: [],
    }
  },
  computed: {
    calcAttributes() {
      return (param) => {
        if (param == null || param == undefined || param === '') return

        let res = this.schoolPropertyList.find((value) => {
          return value.dictValue == param
        })
        return res.dictLabel
      }
    },
    calcStudyField() {
      return (param) => {
        if (param == null || param == undefined || param === '') return

        let res = this.positionList.find((value) => {
          return value.dictValue == param
        })
        return res.dictLabel
      }
    },
  },
  mounted() {
    /*
     * 获取当前session内的字典缓存
     * 先得到当前所需的字典的缓存，然后判断其是否存在。
     * 如果存在则直接放入变量内显示，否则置空
     * 此处处理用于下面判断是否请求接口获取字典数据
     */
    let schoolPropertyJson = sessionStorage.getItem(
      'institutes_institute_attribute'
    )
    let positionJson = sessionStorage.getItem('user_common_field')

    this.schoolPropertyList =
      schoolPropertyJson && schoolPropertyJson != '{}'
        ? JSON.parse(schoolPropertyJson).data
        : []
    this.positionList =
      positionJson && positionJson != '{}' ? JSON.parse(positionJson).data : []
    /* END */

    // 获取字典
    this.getSearchList()
    // 获取详情数据
    this.request()
  },
  methods: {
    // 获取搜索条件列表
    getSearchList() {
      // 获取院所属性
      if (!this.schoolPropertyList.length) {
        this.getDictList('institutes_institute_attribute').then((res) => {
          if (res.code == 200) {
            this.schoolPropertyList = res.data
          }
        })
      }

      // 获取行业领域
      if (!this.positionList.length) {
        this.getDictList('user_common_field').then((res) => {
          if (res.code == 200) {
            this.positionList = res.data
          }
        })
      }
    },

    // 获取详情
    request() {
      getAcademyLibrary(this.detailInfo.id).then((res) => {
        if (res.code === 200) {
          this.detailInfo = res.data
        }
      })
    },

    // 获取相关推荐
    getRecommendList() {
      requestTacademyReList().then((res) => {
        if (res.code === 200) {
          let list = res.rows
          this.recommendList = list.slice(0, 5)
        }
      })
    },

    // 相关推荐跳转
    toDetail(id) {
      this.$router.push({ path: '/techSource/schools/schoolDetail/' + id })
    },
  },
}
</script>

<style lang="scss" scoped>
.detailInfo {
  margin-top: 3.375rem;

  .image {
    width: 32rem;
    height: 17.5rem;
  }

  .context {
    padding: 2rem 2.5rem;
    height: 17.5rem;
    background-color: #ecf4ff;

    .title {
      width: 100%;
      height: auto;
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }

    .title {
      font-weight: bold;
      color: #333;
    }

    .info {
      margin-top: 48px;

      & > div:not(:first-child) {
        margin-top: 0.5rem;
      }
    }
  }
}

.detail_box {
  margin-top: 1rem;
  margin-bottom: 7.5rem;
  padding: 1.625rem 0;

  .detail_header {
    position: relative;
    margin-left: 0.75rem;
    font-size: 20px;
    font-weight: bold;
    color: #1678ff;

    &::before {
      content: ' ';
      position: absolute;
      left: -0.75rem;
      top: 0.5rem;
      width: 0.25rem;
      height: 17px;
      background-color: #1678ff;
    }
  }

  .detail_content {
    padding: 1rem 0;
    width: 100%;
    min-height: 20vh;

    ::v-deep img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
}
.label-w {
  width: 100px;
  margin-right: 4px;
}
.main-content {
  @apply flex py-8 items-start;

  .content {
    @apply flex-grow p-0 pr-4;
  }
}

.recommend_box {
  margin: 3rem 0;
  padding: 1rem 0;

  width: 27.8571rem;
  min-height: 35.3571rem;
  background: #ffffff;
  border: 1px solid #d5d5d5;
  border-top: 2px solid #1678ff;

  .recommend_header {
    position: relative;
    width: 4.5714rem;
    height: 1.5rem;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: #333333;

    &::after {
      position: absolute;
      display: inline-block;
      content: ' ';
      width: 2.2857rem;
      height: 1px;
      bottom: -0.5rem;
      left: 0;
      background-color: #cfcfcf;
    }
  }

  .recommend_content {
    margin-top: 1rem;

    & > div {
      padding: 1.2857rem 0;
      border-bottom: 1px solid #d5d5d5;
    }

    & > div:last-child {
      padding-bottom: 0.75rem;
      border: 0;
    }

    .recommend_content_title {
      padding-left: 0.7142rem;

      &:hover {
        color: blue;
        cursor: pointer;
      }
    }
  }
}
</style>
